<template>
  <div>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem to="/">处方</BreadcrumbItem>
        <BreadcrumbItem to="/Found">处方检索</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
      </Breadcrumb>

      <h2 class="primary">患者信息</h2>
    </div>
    <div class="info">
      <vxe-grid v-bind="gridOptions">
        <template #toolbar_buttons>
          <div class="info-child">
            <div class="info-child1">
              <vxe-input
                v-model="searchName"
                placeholder="请输入患者姓名或身份证号"
                style="width: 280px"
              ></vxe-input>
              <vxe-button status="primary">搜索</vxe-button>
            </div>

            <div>
              <vxe-button
                style="
                  width: 78px;
                  background-color: #945635;
                  color: aliceblue;
                  border: none;
                "
                >+ 新增</vxe-button
              >
              <vxe-button
                style="
                  width: 88px;
                  background-color: #f48c72;
                  color: aliceblue;
                  border: none;
                "
                >批量删除</vxe-button
              >
            </div>
          </div>
        </template>
      </vxe-grid>
    </div>
  </div>
</template>
  
  <script setup>
  import { api_get_hzInfo } from "../../../../api/chufang/huanzhe/huanzhe";
import { ref, reactive, onMounted } from "vue";
const searchName = ref("");
  const tabList = ref({})
  const hzList = () => {
    api_get_hzInfo()
        .then((res) => { 
          tabList.value=res.data.data.list
        })
        .catch((err) => {
      console.log(err);
    })
}
  onMounted(() => {
  hzList()
})

const gridOptions = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
 
  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "id", title: "序号", width: 70, align: "center" },
    { field: "patient_name", title: "姓名", width: 239 },
    { field: "patient_idnum", title: "身份证号"},
    { field: "patient_sex", title: "性别", width: 120, align: "center" },
    { field: "patient_birthday", title: "出生年月", width: 100, align: "center" },
    { field: "patient_nation", title: "民族", width: 120, align: "center" },
    { field: "patient_place", title: "籍贯", width: 120, align: "center" },
    { field: "patient_mobile", title: "手机号", width: 120, align: "center" },
    { field: "operate", title: "操作", width: 200, align: "center" },
  ],
  data:tabList
});
</script>
  
  <style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 10px;
  padding-left: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}
.primary {
  color: rgb(148, 86, 53);
}
.info-child1 {
  padding-bottom: 8px;
}
h2 {
  font-weight: normal;
  font-size: 20px;
}
</style>